<template>
  <div class="weather-page">
    <van-nav-bar
      title="天气预报"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="weather-content">
      <div v-if="loading" class="loading-container">
        <van-loading type="spinner" size="36px" />
        <p>加载天气数据中...</p>
      </div>
      
      <div v-else-if="error" class="error-container">
        <van-empty image="error" description="加载天气数据失败" />
        <van-button type="primary" size="small" @click="fetchWeatherData">重新加载</van-button>
      </div>
      
      <template v-else>
        <div class="current-weather">
          <div class="city-info">
            <h2>{{ weatherData.city }}</h2>
            <p>{{ formatDate(new Date(), 'MM月DD日') }} {{ getDayOfWeek() }}</p>
          </div>
          
          <div class="weather-info">
            <div class="temperature">
              <span class="value">{{ weatherData.temperature }}</span>
              <span class="unit">°C</span>
            </div>
            
            <div class="weather-type">
              <van-icon :name="getWeatherIcon(weatherData.weather)" size="48" />
              <span>{{ getWeatherText(weatherData.weather) }}</span>
            </div>
          </div>
          
          <div class="weather-details">
            <div class="detail-item">
              <van-icon name="guide-o" />
              <span>湿度 {{ weatherData.humidity }}%</span>
            </div>
            
            <div class="detail-item">
              <van-icon name="exchange" />
              <span>风速 {{ weatherData.windSpeed || '3' }}m/s</span>
            </div>
            
            <div class="detail-item">
              <van-icon name="eye-o" />
              <span>能见度 {{ weatherData.visibility || '10' }}km</span>
            </div>
          </div>
        </div>
        
        <div class="forecast-container">
          <h3>未来天气预报</h3>
          
          <div class="forecast-list">
            <div 
              v-for="(item, index) in forecastData" 
              :key="index" 
              class="forecast-item"
            >
              <p class="day">{{ item.day }}</p>
              <van-icon :name="getWeatherIcon(item.weather)" size="24" />
              <p class="temp">{{ item.tempMin }}° / {{ item.tempMax }}°</p>
            </div>
          </div>
        </div>
        
        <div class="weather-tips">
          <h3>天气小贴士</h3>
          <p>{{ getWeatherTips(weatherData.weather) }}</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { formatDate } from '../../../utils/common'

const router = useRouter()

// 天气数据
const weatherData = ref({
  city: '北京',
  temperature: 26,
  weather: 'sunny',
  humidity: 40,
  windSpeed: 3,
  visibility: 10
})

// 天气预报数据
const forecastData = ref([
  { day: '今天', weather: 'sunny', tempMin: 22, tempMax: 28 },
  { day: '明天', weather: 'cloudy', tempMin: 20, tempMax: 25 },
  { day: '周三', weather: 'rainy', tempMin: 18, tempMax: 23 },
  { day: '周四', weather: 'rainy', tempMin: 17, tempMax: 22 },
  { day: '周五', weather: 'cloudy', tempMin: 19, tempMax: 24 }
])

const loading = ref(false)
const error = ref(false)

// 获取天气数据
const fetchWeatherData = async () => {
  loading.value = true
  error.value = false
  
  try {
    // 实际项目中应该调用真实的API
    // const { data } = await get('/api/weather/detail')
    
    // 模拟数据加载
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 这里使用模拟数据，实际项目中应该使用API返回的数据
    weatherData.value = {
      city: '北京',
      temperature: 26,
      weather: 'sunny',
      humidity: 40,
      windSpeed: 3,
      visibility: 10
    }
    
    forecastData.value = [
      { day: '今天', weather: 'sunny', tempMin: 22, tempMax: 28 },
      { day: '明天', weather: 'cloudy', tempMin: 20, tempMax: 25 },
      { day: '周三', weather: 'rainy', tempMin: 18, tempMax: 23 },
      { day: '周四', weather: 'rainy', tempMin: 17, tempMax: 22 },
      { day: '周五', weather: 'cloudy', tempMin: 19, tempMax: 24 }
    ]
  } catch (err) {
    console.error('获取天气数据失败:', err)
    error.value = true
    showToast('获取天气数据失败')
  } finally {
    loading.value = false
  }
}

// 获取星期几
const getDayOfWeek = () => {
  const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  return days[new Date().getDay()]
}

// 获取天气图标
const getWeatherIcon = (weatherType) => {
  const iconMap = {
    sunny: 'sunny-o',
    cloudy: 'cloud-o',
    rainy: 'umbrella-circle',
    snowy: 'snowflake-o',
    windy: 'wind-circle-o',
    foggy: 'eye-o',
    thunder: 'lightning'
  }
  
  return iconMap[weatherType] || 'question-o'
}

// 获取天气文本描述
const getWeatherText = (weatherType) => {
  const textMap = {
    sunny: '晴天',
    cloudy: '多云',
    rainy: '雨天',
    snowy: '雪天',
    windy: '大风',
    foggy: '雾天',
    thunder: '雷雨'
  }
  
  return textMap[weatherType] || '未知天气'
}

// 获取天气小贴士
const getWeatherTips = (weatherType) => {
  const tipsMap = {
    sunny: '今天阳光明媚，适合户外活动，注意防晒哦！',
    cloudy: '今天多云，气温适宜，适合外出活动。',
    rainy: '今天有雨，出门记得带伞，注意路滑。',
    snowy: '今天有雪，注意保暖，路面可能结冰，出行注意安全。',
    windy: '今天风较大，外出注意保暖，小心轻物被吹走。',
    foggy: '今天有雾，能见度低，开车注意安全。',
    thunder: '今天有雷雨，尽量避免户外活动，注意防雷。'
  }
  
  return tipsMap[weatherType] || '无论天气如何，注意身体健康才是最重要的！'
}

// 返回上一页
const onClickLeft = () => {
  router.back()
}

onMounted(() => {
  fetchWeatherData()
})
</script>

<style lang="scss" scoped>
.weather-page {
  min-height: 100vh;
  background-color: var(--background-color);
  
  .weather-content {
    padding: 16px;
    
    .loading-container, .error-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 300px;
      
      p {
        margin-top: 16px;
        color: var(--text-color-secondary);
      }
      
      .van-button {
        margin-top: 16px;
      }
    }
    
    .current-weather {
      background-color: var(--background-color-light);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: var(--box-shadow);
      
      .city-info {
        margin-bottom: 16px;
        
        h2 {
          font-size: 24px;
          font-weight: 500;
          margin-bottom: 4px;
          color: var(--text-color);
        }
        
        p {
          font-size: 14px;
          color: var(--text-color-secondary);
        }
      }
      
      .weather-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        
        .temperature {
          .value {
            font-size: 48px;
            font-weight: 300;
            line-height: 1;
            color: var(--text-color);
          }
          
          .unit {
            font-size: 20px;
            color: var(--text-color-secondary);
          }
        }
        
        .weather-type {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .van-icon {
            margin-bottom: 8px;
            color: var(--primary-color);
          }
          
          span {
            font-size: 16px;
            color: var(--text-color);
          }
        }
      }
      
      .weather-details {
        display: flex;
        justify-content: space-between;
        
        .detail-item {
          display: flex;
          align-items: center;
          
          .van-icon {
            margin-right: 4px;
            color: var(--primary-color);
          }
          
          span {
            font-size: 14px;
            color: var(--text-color-secondary);
          }
        }
      }
    }
    
    .forecast-container {
      background-color: var(--background-color-light);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: var(--box-shadow);
      
      h3 {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 16px;
        color: var(--text-color);
      }
      
      .forecast-list {
        display: flex;
        justify-content: space-between;
        
        .forecast-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .day {
            font-size: 14px;
            margin-bottom: 8px;
            color: var(--text-color);
          }
          
          .van-icon {
            margin-bottom: 8px;
            color: var(--primary-color);
          }
          
          .temp {
            font-size: 12px;
            color: var(--text-color-secondary);
          }
        }
      }
    }
    
    .weather-tips {
      background-color: var(--background-color-light);
      border-radius: 12px;
      padding: 20px;
      box-shadow: var(--box-shadow);
      
      h3 {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 12px;
        color: var(--text-color);
      }
      
      p {
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-color-secondary);
      }
    }
  }
}
</style> 